import React, { Component } from 'react'
import {
    Modal,
    Flex,
    Icon,
    Toast,
    Drawer
} from 'antd-mobile';
import MyListView from '../../components/MyListView/MyListView';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
//import { goods_search_title, goods_search_header, goods_list } from "./GoodsSearch.less"
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import { parse } from 'query-string';
import SpecFilter from './storesFilter';

import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import doodsFilter from '../../assets/svg/filter.svg';
import showChange1 from '../../assets/svg/showChange1.svg';
import showChange2 from '../../assets/svg/showChange2.svg';
import {goods_list, goods_search_header, goods_search_title} from "../search/GoodsSearch.less";

class StoresSearch extends Component {
    constructor(props) {
        super(props);
        this.state = {
            layoutType:true,
            open:false,
            id:this.props.match.params.id,
            stcId:this.props.match.params.stcId,
            stcName:this.props.match.params.stcName,
        };
        this.AlloyTouch = null;
        //console.log(this.props.match.params.stcName)
    }

    componentDidMount() {
        // this.props.dispatch({ type: 'storesShow/classGoodsEFF', obj:{ id:this.props.match.params.id,stcId:this.props.match.params.stcId }})
        this.props.dispatch({ type: 'storesShow/filterGoodsEFF', obj:{ searchType:'keywordSearch',keyword:this.props.match.params.stcName,id:this.props.match.params.id }})
    }

    refresh = () => {
        return this.props. dispatch({ type: 'storesShow/getGoodsSearchEFF', obj:{ pageNo:1 } });
    }

    loadMore = () => {
        return this.props. dispatch({ type: 'storesShow/getGoodsSearchEFF', obj:{ pageNo:this.props.goodsearch.filter.pageNo+1 } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    changeOrder = ( sortField, sortOrder ) =>{
        this.AlloyTouch.to(0);
        Toast.loading();
        this.props.dispatch({
            type: 'storesShow/getgoodsEFF',
            obj:{
                id:this.props.match.params.id,
                pageNo:1,
                sortField:sortField,
                orderBy:sortOrder,
                goodsType:0
            }
        });
    }

    onOpenChange = (e) => {

        //console.log(minimumPrice=="");
        if(this.state.open==true){
            const { minimumPrice, maximumPrice } = this.props.storesShow;
            // 最低最高
          // console.log(parseInt(minimumPrice, 10));
            if(minimumPrice!=""&&maximumPrice!=""&&parseInt(minimumPrice, 10) >= parseInt(maximumPrice, 10)) {
                Toast.info('最低价不能大于最高价', 1.5);
                return;
            }

            this.props.dispatch({
                type: 'storesShow/filterSureEFF',
                obj:{
                    pageNo:1
                }
            });
        };
        this.setState({ open: !this.state.open });
    }

    render() {
        // let { arr, value } = this.state;
       const {  match, dispatch, location} = this.props;
       const { classGoods,specList,minimumPrice, maximumPrice ,filter} = this.props.storesShow;
        let { layoutType, open } = this.state;

        // console.log(this.props.storesShow)
        return (
            <Flex style={{
                height:"100%"
            }} direction="column"
            >
                <Flex className={ goods_search_title }>
                    <Icon onClick={ ()=> this.props.dispatch(routerRedux.goBack()) } type='left' style={{ paddingLeft:'0.1rem' }}/>
                    <Flex className="search_input" onClick={ ()=>{
                        dispatch(routerRedux.replace(`/stores/${this.props.match.params.id}`));
                    } }>
                        <form>
                            <input placeholder="搜索本店" value={ decodeURIComponent(parse(location.search).showKeyword === undefined ? "" : parse(location.search).showKeyword) } readOnly type="search" />
                        </form>
                        <Icon className="search_icon" style={{ color:"#1d1d1d" }} type="search" size="md" />
                    </Flex>
                    {/*<div className="search_cancelbtn">搜索</div>*/}

                    <Icon
                        onClick={()=>{
                            this.setState({ layoutType: !layoutType },()=>{
                                this.AlloyTouch.min = -this.AlloyTouch.target.offsetHeight;
                                this.AlloyTouch.to(0);
                                if(Math.abs(this.AlloyTouch.target._translateY)<this.AlloyTouch.target.offsetHeight){
                                    console.log(this.AlloyTouch.target.offsetHeight);
                                    console.log(this.AlloyTouch.target._translateY);

                                }
                            });
                        }}
                        className="search_cancelbtn"
                       type={ layoutType==true ? showChange2.id : showChange1.id }
                    />
                </Flex>

                <Flex className={goods_search_header}>
                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('', filter.sortField =='' ? ( filter.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={filter.sortField ==''?{marginRight: '.04rem',color:"#ff0036"}:{marginRight: '.04rem'}}>综合</span>
                        {/*<Icon  type={*/}
                        {/*filter.sortField =='' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id*/}
                        {/*}/>*/}
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('salenum', filter.sortField =='salenum' ? ( filter.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>销量</span>
                        <Icon  type={
                            filter.sortField =='salenum' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('goodsStorePrice', filter.sortField =='goodsStorePrice' ? ( filter.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>价格</span>
                        <Icon  type={
                            filter.sortField =='goodsStorePrice' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex justify="center" onClick={ this.onOpenChange }>
                        <span>筛选</span>
                        <Icon  type={doodsFilter.id}/>
                    </Flex>

                </Flex>



                <MyListView
                    // key={ layoutType == true ? 1 : 0 }
                    //  className={ wrapper_goods_list }
                    getAlloyTouch={ this.getAlloyTouch }
                    //refresh={ this.refresh }
                   // loadMore={ this.loadMore }
                    //hasMore={ hasMore }
                    itemWrapperClass={ goods_list }
                 //   bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return (
                            <div  onClick={()=>{ dispatch(routerRedux.push(`/goodsDetail/${v.specId}`)) }}  style={ layoutType == true ? {} : { width:'50%', float:'left' } } key={i}>
                                {
                                    this.state.layoutType ==true ?
                                        <div style={{ paddingLeft:'0.14rem', backgroundColor:"#fff" }}>
                                            <Flex  style={{ height:"0.2rem" }}>
                                                <div style={ i==0 ? { border:"none" } : {} } className="gli_line"></div>
                                            </Flex>
                                            <Flex className="goods_list_item">
                                                <div className="goods_img">
                                                    <NoLazyImg src={ v.image } />
                                                    {
                                                        v.serial < 10 && v.serial > 0 ? <div className="serial">仅剩{v.serial}件</div> : ""
                                                    }
                                                    {
                                                        v.serial == 0 ? <div className="no_store"></div> : ""
                                                    }
                                                </div>

                                                <Flex direction="column" className="goods_content">
                                                    <div className="name text-two-eli"  style={ v.serial == 0 ? { color:'#999' } : {} }>{ v.name }</div>
                                                    <div className="price" style={ v.serial == 0 ? { color:'#999',width:"100%" } : {width:"100%"} }>￥{ v.storePrice}</div>
                                                    <div className="commentnum_evaluate">
                                                        <span style={{ marginRight:"0.5rem" }}>{v.commentnum}条评价</span>
                                                        <span>销量：{ v.salenum }</span>
                                                    </div>
                                                </Flex>
                                            </Flex>
                                        </div> :
                                        <div className="goods_list_item2" style={ i%2==0 ? { margin:'0.2rem 0.1rem 0rem 0.2rem' } : { margin:'0.2rem 0.2rem 0rem 0.1rem' } }>
                                            <div className="goods_img">
                                                <NoLazyImg src={ v.image } />
                                                {
                                                    v.serial < 10 && v.serial > 0 ? <div className="serial">仅剩{v.serial}件</div> : ""
                                                }
                                                {
                                                    v.serial == 0 ? <div className="no_store"></div> : ""
                                                }
                                            </div>
                                            <div className="name text-overflow-hidden" style={ v.serial == 0 ? { color:'#999' } : {} }>{ v.name }</div>
                                            <div className="price" style={ v.serial == 0 ? { color:'#999',width:"100%" } : {width:"100%"} }>￥{ v.storePrice }</div>
                                            <div className="commentnum_evaluate">
                                                <span style={{ marginRight:"0.5rem" }}>{v.commentnum}条评价</span>
                                                <span>销量：{ v.salenum }</span>
                                            </div>
                                        </div>
                                }
                            </div>
                        )
                    }}
                    data={ classGoods}>
                </MyListView>

                <Drawer
                    className="my-drawer"
                    style={{ width: open==true ? "100%" : "1%" }}
                    enableDragHandle
                    position="right"
                    sidebarStyle={{ width:"80%", marginLeft:'20%', maxWidth:'6rem',backgroundColor:'#fff' }}
                    contentStyle={{ width:'0rem',height:"0rem" }}
                    sidebar={
                        <SpecFilter onOpenChange={ this.onOpenChange } minimumPrice={ minimumPrice } maximumPrice={ maximumPrice } specList={ specList } dispatch={ dispatch }></SpecFilter>
                    }
                    open={ open }
                    onOpenChange={this.onOpenChange}
                >
                    <span></span>
                </Drawer>

            </Flex>
        )
    }
}

export default connect(({ storesShow }) => ({ storesShow }))(StoresSearch);
